<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="../../fontawesome-5.15.4/css/all.min.css">
    <link rel="stylesheet" href="../../fontawesome-5.15.4/css/v4-shims.css">
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    .show-monitor {
        width: 320px;
        height: 600px;
        border: 2px solid #bfa;
        margin: 50px 0 0 50px;
    }

    .panel-head {
        height: 40px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .play{
        position: absolute;
        width: 20px;
        height: 20px;
        left: 5px;
        border-radius: 50%;
        border: 1px solid red;
        background-color: red;
    }
    .play>div{
        height: 0;
        width: 0;
        border-left: 10px solid #fff;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        margin-left: 6.5px;
        margin-top: 3.5px;
    }
    .panel-head-title{
        flex-grow: 1;
        font-size: 20px;
        color: #333;
        margin-left: 35px;
    }
    .panel-head>i,
    .panel-head-sx{
        font-size: 16px;
        color: red;
        margin-right: 10px;
    }
    .panel-con{
        height: 94px;
        margin-top: 10px;
        display: flex;
    }
    .panel-con-img{
        width: 126px;
        /*不缩放*/
        flex-shrink: 0;
    }
    .panel-con-img img{
        width: 100%;
        height: 100%;
        /*图片正常比例下裁剪*/
        object-fit: cover;
    }
    .panel-con-txt{
        /*占满剩余空间*/
        flex-grow: 1;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
    }
    .panel-con-txt a{
        font-size: 16px;
        color: #222;
        /*文字超出省略号显示*/
        overflow: hidden;
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*设置或检索伸缩盒子对象的子元素的排列方式*/
        -webkit-box-orient: vertical;
        /*限制在一个块级元素显示的文字的行数*/
        -webkit-line-clamp: 2;
        /*文本溢出显示省略号*/
        text-overflow: ellipsis;
    }
    .panel-con-txt>span{
        font-size: 12px;
        background-color: #f2f2f2;
        color: #f04142;
        align-self: flex-start;
        padding: 1px 6px;
        border-radius: 5px;
        margin: 8px 0 8px 5px;
    }
    .desc{
        display: flex;
        justify-content: space-between;
        color: #999;
        font-size: 14px;
    }
</style>
<body>
<div class="show-monitor">
    <div class="panel-head">
        <div class="play">
            <div></div>
        </div>
        <span class="panel-head-title">热门视频</span>
        <i class="fa fa-refresh" aria-hidden="true"></i>
        <span class="panel-head-sx">换一换</span>
    </div>
    <div class="panel-con">
        <div class="panel-con-img">
            <img src="../img/1.jpg" alt="">
        </div>
        <div class="panel-con-txt">
            <a href="#">
                强制 span 标签内的内容不换行，并且在内容超出容器宽度时以省略号
            </a>
            <span>1千评论</span>
            <div class="desc">
                <span>140观看</span>
                <span>电影频道</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>
